<template>
  <div class="match-result">
    <div class="match-result-item" v-for="group in odds">
      <div class="match-result-item__label">{{ group.pk_name }}</div>
      <div class="match-result-item__value">
        <OddItem
          v-for="item in group.odds"
          :label="item.pk_odds_name"
          :value="item.odd"
          :size="group.odds.length > 2 ? 'small' : ''"
          @click="store.selectMetchResult(item, match)"
          :active="match.ids == state.orderData?.match?.ids && state.orderData.list[item.pk_odds_key]"
          :disabled="group.status == 0"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import OddItem from './OddItem.vue'

const props = defineProps({
  match: Object,
  odds: Array,
})

const { store, state } = inject('Sell')
</script>
<style lang="scss" scoped>
.match-result {
  flex: 1;
  display: flex;
}

.match-result-item {
  width: 104px;
  margin-right: 4px;
  display: flex;
  flex-direction: column;
}

.match-result-item__label {
  margin-bottom: 8px;
  color: #778090;
  text-align: center;
}

.match-result-item__value {
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>
